<template>
  <div id="seedoctor">
    <!-- 新开就诊 -->
    <el-row>
      <el-col :span="8" style="margin:10px 10px">
        <strong><i>今日就诊</i></strong>
        <div
          style="
            background-color: #ffffff;
            margin-top: 2px;
            padding-left: 10px;
            padding-top: 5px;
          "
        >
          快速查询：<el-input
            size="small"
            placeholder="姓名/手机号"
            style="width: 250px"
            v-model="select01"
            @keydown.enter.native="downinput()"
          ></el-input>
          <el-button
            @click="selectbynameOrphp"
            size="small"
            icon="el-icon-search"
            type="primary"
            >查询</el-button
          >

          <template>
            <el-tabs v-model="activeName" style="margin-top: 5px">
              <el-tab-pane
                id="table1"
                style="height: 474px"
                label="未就诊"
                name="nodoctor"
              >
                <el-table
                  v-if="activeName == 'nodoctor'"
                  :data="falseReg"
                  style="width: 100%"
                  @row-click="handle"
                  height="460"
                >
                  <el-table-column label="患者信息" width="205">
                    <template slot-scope="scope">
                      {{
                        scope.row.dzmPatient.name +
                        "/" +
                        (new Date().getFullYear() -
                          new Date(
                            scope.row.dzmPatient.birthday
                          ).getFullYear()) +
                        "岁" +
                        "/" +
                        (scope.row.dzmPatient.sex == 1 ? "男" : "女")
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column label="挂号时间">
                    <template slot-scope="scope">
                      <b>{{
                        new Date(
                          scope.row.dzmPatient.updateTime * 1000
                        ).toLocaleDateString()
                      }}</b>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane
                style="height: 474px"
                label="已就诊"
                name="yesdoctor"
                id="table2"
              >
                <el-table
                  v-if="activeName == 'yesdoctor'"
                  :data="trueReg"
                  style="width: 100%"
                  height="470"
                >
                  <el-table-column label="患者信息" width="205">
                    <template slot-scope="scope">
                      {{
                        scope.row.name +
                        "/" + 
                        (scope.row.age==null?'未设置':(scope.row.age+'岁'))
                         +
                        "/" +scope.row.sex
                      }}
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </template>
        </div>
      </el-col>

      <!-- 右边开始就诊 -->
      <el-col :span="15" style="margin:10px 10px">
     <strong><i>病例信息</i></strong>
      
        <template>
          <el-tabs v-model="binli" type="border-card">
            <el-tab-pane style="height: 474px" label="病例信息" name="binli">
              <el-form :disabled="user.disabled">
                <el-descriptions direction="descriptions" title="患者信息">
                  <el-descriptions-item label="姓名"
                    ><el-input
                      v-model="user.name"
                      placeholder="（必填）"
                      class="full"
                  /></el-descriptions-item>
                  <el-descriptions-item label="手机号"
                    ><el-input
                      v-model="user.php"
                      placeholder="（必填）"
                      class="full"
                  /></el-descriptions-item>
                  <el-descriptions-item label="居住地"
                    ><el-input
                      v-model="user.address"
                      placeholder="（选填）"
                      class="full"
                  /></el-descriptions-item>
                  <el-descriptions-item label="性别">
                    <el-select
                      v-model="user.sex"
                      placeholder="（必填）"
                      class="full"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-descriptions-item>
                  <el-descriptions-item label="联系地址"
                    ><el-input
                      v-model="user.phpaddress"
                      placeholder="选填"
                      style="width: 190px"
                      class="full"
                  /></el-descriptions-item>
                </el-descriptions>
              </el-form>
              <el-button
                @click="resltuserinfo"
                class="bu_cl"
                type="success"
                icon="el-icon-refresh"
              ></el-button>
              <strong>开始就诊</strong>
              <table>
                <tr>
                  <td>
                    <span>主诉:</span>
                    <el-input v-model="diag.zhushu" style="width: 200px" />
                  </td>
                  <td class='td_cl'>
                    <span>发病日期:</span>
                    <el-date-picker
                      v-model="diag.fabingdate"
                      type="date"
                      placeholder="选择日期"
                    />
                  </td>
                </tr>
                <tr> 
                  <td>&#8194; </td>
                </tr>
                <tr style="margin-top:30px">
                  <td>
                    <span>接诊类型：</span>
                    <el-radio-group v-model="diag.leixin" size="small" @change="changeTheme2" fill="#66b1ff">
                        <el-radio :label="0">初诊</el-radio>
                        <el-radio :label="1">复诊</el-radio>
                        <el-radio :label="2">急诊</el-radio>
                     </el-radio-group>
                  <td class='td_cl'>
                    <span>是否传染：</span>
                      <el-radio-group v-model="diag.chuanran" size="small" @change="changeTheme" fill="#66b1ff">
                        <el-radio :label="0">否</el-radio>
                        <el-radio :label="1">是</el-radio>
                       </el-radio-group>
                  </td>
                </tr>
                <tr> 
                  <td>&#8194; </td>
                </tr>
                <tr>
                  <td colspan="2">
                    <span>就诊结果:</span>
                    <el-input
                      v-model="diag.reslt"
                      type="textarea"
                      placeholder=""
                    />
                  </td>
                </tr>
                <tr>
                  <td colspan="2">
                    <span>医生建议:</span>
                    <el-input
                      v-model="diag.jianyi"
                      type="textarea"
                      placeholder=""
                    />
                  </td>
                </tr>
                <tr>
                  <td colspan="2">
                    <span>备注:</span>
                    <el-input
                      v-model="diag.beizhu"
                      type="textarea"
                      placeholder=""
                    />
                  </td>
                </tr>
              </table>
            </el-tab-pane>
            <el-tab-pane style="height: 474px" label="开处方药" name="chufang">
              <el-button
                @click="addCF(1)"
                type="primary"
                size="mini"
                icon="el-icon-plus"
              ></el-button>
              <!-- 处方显示 -->
              <el-row>
                <el-col :span="24">
                  <!-- 遍历选中处方集合 -->
                  <span v-for="(item, index) in chufanglist" :key="index">
                    <el-collapse v-model="ac" accordion>
                      <el-collapse-item :name="index">
                        <template slot="title">
                          <h1 >   
                               药品处方{{ index + 1 }}
                            <el-button
                              @click.stop="delect(index, 1)"
                              icon="el-icon-close"
                              style='margin-left:650px'
                              size="mini"                         
                              circle
                            >
                            </el-button>
                          </h1>
          
                        </template>
                        <div>
                          <el-table :data="item" height="180">
                            <el-table-column
                              prop="medicinesName"
                              label="药品名称"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="inventoryNum"
                              label="药品库存"
                            ></el-table-column>
                            <el-table-column
                              prop="inventoryPrescriptionPrice"
                              label="单价"
                            ></el-table-column>
                            <el-table-column label="需要数量">
                              <template slot-scope="sc">
                                <input
                                  value="1"
                                  :id="'a' + index + sc.row.medicinesId"
                                  @input="inputcall(sc.row, index)"
                                  @mouseleave="inputcall2(sc.row, index)"
                                  oninput="value=value.replace(/[^\d.]/g,'')"
                                />
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop="unit"
                              label="药品单位"
                            ></el-table-column>
                          </el-table>


                        </div>
                      </el-collapse-item>
                    </el-collapse>
                  </span>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane style="height: 474px" label="检查项目" name="jiancha">
              <el-button
                @click="addCF(2)"
                type="warning"
                size="mini"
                icon="el-icon-plus"
              ></el-button>
              <!-- 检查项目显示 -->
              <el-row>
                <el-col :span="24">
                  <!-- 遍历选中项目集合 -->
                  <span v-for="(item, index) in xiangmulist" :key="index">
                    <el-collapse v-model="ac1" accordion>
                      <el-collapse-item :name="index">
                        <template slot="title">
                          <h1>
                            检查项目{{ index + 1 }}
                            <el-button
                              @click.stop="delect(index, 2)"
                              icon="el-icon-close"
                              size="mini"
                              style="margin-left: 600px"
                              circle
                            >
                            </el-button>
                          </h1>
                        </template>
                        <div>
                          <el-table :data="item" height="180">
                            <el-table-column
                              prop="inspectionName"
                              label="项目名称"
                            >
                            </el-table-column>
                            <el-table-column label="需要数量">
                              <template>
                                <p>1</p>
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop="unit"
                              label="项目单位"
                            ></el-table-column>
                          </el-table>
                        </div>
                      </el-collapse-item>
                    </el-collapse>
                  </span>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </template>
        <div style="background-color: #ffffff">
          <el-button
            @click="complete"
            style="margin-left: 730px"
            type="primary"
            size="mini"
            >完成就诊</el-button
          >
        </div>
      </el-col>
    </el-row>

    <!-- 测边框 -->
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <el-row style="margin-top: 30px">
        <el-col :span="5" :offset="11"><h1>费用清单</h1></el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="23" :offset="1">
          <el-descriptions title="患者信息" :column="2">
            <el-descriptions-item label="用户名">{{
              user.name
            }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{
              user.php
            }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{
              user.sex
            }}</el-descriptions-item>
            <el-descriptions-item label="地址">{{
              user.address
            }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="23" :offset="1">
          <el-descriptions title="病例" :column="2">
            <el-descriptions-item label="主诉">{{
              diag.zhushu
            }}</el-descriptions-item>
            <el-descriptions-item label="诊断结果" style="color: red">{{
              diag.reslt
            }}</el-descriptions-item>
            <el-descriptions-item label="诊治医生" style="color: red">{{
               newdoctorname.trueName
            }}</el-descriptions-item>
            <el-descriptions-item label="备注" style="color: red">{{
              diag.beizhu
            }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <el-row style="margin:20px 20px">
        <el-col :span="24">
            <el-descriptions title="额外服务" :column="1">
            <el-descriptions-item label="药品处方总费用：">
              <!-- 付费项项目 -->              
                  <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="fylist" @change='bianhua'>
                      <el-checkbox v-for="obj in fujiafeilist" :label="obj" :key="obj.preId">{{obj.extrachargesName}}
                    </el-checkbox>
                  </el-checkbox-group>
              </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
       <el-row style="margin-top: 10px">
        <el-col :span="12" :offset="1">
          <el-descriptions title="费用" :column="1">
            <el-descriptions-item label="药品处方总费用："
              ><h1>{{ ypprice }}元</h1></el-descriptions-item
            >
            <el-descriptions-item label="检查项目总费用："
              ><h1>{{ xmprice }}元</h1></el-descriptions-item
            >
            <el-descriptions-item label="挂号费："
              ><h1>{{ fujiafei }}元</h1></el-descriptions-item
            >
              <el-descriptions-item label="附加费："
              ><h1>{{ fjf }}元</h1></el-descriptions-item
            >
          </el-descriptions>
        </el-col>
        <el-col :span="11">
         <img src='../../assets/his.png' style="width:140px;margin-top:35px"/>

        </el-col>
      </el-row>
      <el-row style="margin-top: 77px">
        <el-col :span="12" class="el_col_cl1">
          <h1 class="h1_cl">总费用：{{ ypprice + xmprice + fujiafei+fjf }}元</h1>
        </el-col>
        <el-col :span="12">
          <el-button
            @click="Submit"
            type="success"
            style="width: 100%; height: 50px; margin-bottom: 0px"
            >开单</el-button
          >
        </el-col>
      </el-row>
    </el-drawer>

    <!-- 添加药品处方 -->
    <el-dialog title="添加药品处方" :visible.sync="addchufang">
      <el-table
        ref="table"
        @selection-change="handleSelectionChange"
        height="350"
        :data="medicinelist"
        stripe
        style="width: 100%"
      >
        <el-table-column :selectable="checkSelect" type="selection" width="55">
        </el-table-column>
        <el-table-column prop="medicinesNumber" label="药品编号" />
        <el-table-column prop="medicinesName" label="药品名称" />
        <el-table-column prop="unit" label="药品单位" />
        <el-table-column
          prop="inventoryPrescriptionPrice"
          label="单价"
        ></el-table-column>
        <el-table-column prop="inventoryNum" label="药品库存" />
      </el-table>
      <el-button class="bu_cl_an" @click="addmedicines(1)" type="primary" icon='el-icon-plus'>添加</el-button>
    </el-dialog>
    <!-- 添加检查项目处方 -->
    <el-dialog title="添加检查项目" :visible.sync="addxiangmu">
      <el-table
        :data="Inspection"
        height="350"
        ref="table2"
        @selection-change="handleSelectionChange1"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          prop="inspectionName"
          label="项目名称"
        ></el-table-column>
        <el-table-column prop="clas" label="项目类别"></el-table-column>
        <el-table-column prop="unitPrice" label="项目单价"></el-table-column>
        <el-table-column prop="unit" label="项目单位"></el-table-column>
      </el-table>
      <el-button class="bu_cl_an" @click="addmedicines(2)" type="primary" icon='el-icon-plus'>添加</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { loading, Sloading } from "../../api/doctor/tools/loading";
import { open2, open3, open4 } from "../../api/doctor/tools/alert";
import {
  getAllRegisterToday,
  getMedicinesList,
  getAllInspection,
  selectbynameOrphp,
  billing,
  getAllRegisterToday2,
  getNewdoctorinfo,
  getAllext
} from "../../api/doctor/seedoctor";
export default {
  name: "Seedoctor",
  data() {
    //-----------
    return {
      //首页查询
      select01: "",
      //时间
      today: "",
      // 患者信息
      user: {
        disabled: false,
        registrationId:"",
        patientId:"",
        name: "",
        php: "",
        address: "",
        sex: "",
        phpaddress: "",
        doctorname: "",
      },
      newdoctorname:{},
      //诊断信息
      diag: {
        zhushu: "",
        fabingdate: "",
        chuanran: 0,
        leixin:0,
        reslt: "",
        jianyi: "",
        beizhu: "",
      },
      //收费项目列表
      fujiafeilist:[],
      fylist:[],
      fjf:0,
      //收费框
      dialogTableVisible: false,
      //添加处方
      addchufang: false,
      addxiangmu: false,
      // 测边框
      drawer: false,
      //默认
      ac: "",
      ac1: "",
      ac2: "",
      ac3: "",
      activeName: "nodoctor",
      binli: "binli",
      // 未就诊列表
      falseReg: [],
      // 已就诊列表
      trueReg: [],
      // 患者性别
      options: [
        {
          value: "1",
          label: "男",
        },
        {
          value: "2",
          label: "女",
        },
      ],

      //药品列表
      medicinelist: [],
      //检测项目
      Inspection: [],

      //药品选中集合
      multipleSelection: [],

      //项目选中集合
      multipleSelection1: [],

      //处方集合
      chufanglist: [],

      //项目集合
      xiangmulist: [],

      //药品总价格
      ypprice: 0,
      //项目总价格
      xmprice: 0,
      //附加费
      fujiafei: 30,
      //总数居
      str:'',
      list:"",
      //多选附加费
      checkList:[]
    };
  },
  methods: {
    changeTheme(val){
      this.diag.chuanran
    },
    changeTheme2(val){
      this.diag.leixin
    },
    handle(row, event, column) {
      this.user.disabled = true;
      this.user.patientId =  row.dzmPatient.patientId
      this.user.registrationId=row.registrationId
      this.user.name = row.dzmPatient.name;
      this.user.patientId=row.dzmPatient.patientId;
      this.user.php = row.dzmPatient.mobile;
      this.user.address = row.dzmPatient.address;
      row.dzmPatient.sex == 1 ? (this.user.sex = "男") : (this.user.sex = "女");
      this.user.doctorname = row.dzmHisDoctor.trueName;
    },

    //添加药品
    handleSelectionChange(val) {
      this.multipleSelection = val; // 返回的是选中的列的数组集合
    },
    //添加项目
    handleSelectionChange1(val) {
      this.multipleSelection1 = val; // 返回的是选中的列的数组集合
    },
    //附加费
    bianhua(){
      let sum = 0;
      for(let obj of this.fylist){
          sum =sum+parseInt(obj.fee)
      }
      this.fjf=sum
    },

    //删除处方
    delect(index, e) {
      if (e == 1) {
        this.chufanglist.splice(index, 1);
      } else {
        this.xiangmulist.splice(index, 1);
      }
    },
    //添加处方
    addCF(e) {
      let rows = this.chufanglist.length + this.xiangmulist.length;
      if (rows >= 5) {
        open3(this, "处方和项目总和不能超过5个");
        return;
      }
       if (e == 1) {
        this.addchufang = true;
      } else {
        this.addxiangmu = true;
      }
    },
    //完成就诊
    complete() {
      let zonglist=[]
      let zonglist2=[]
      let o =0;
      let cfmoney ;
       
      for(let i = 0 ;i<this.chufanglist.length; i++){
              let yplist=[];
              let obj = this.chufanglist[i]
              for(let c = 0 ; c<obj.length;c++){
                  cfmoney=0
                  let obj1 = obj[c]
                  let ob =   document.getElementById("a" + i + obj1.medicinesId)
                  cfmoney= ob.value*obj1.inventoryPrescriptionPrice
                  o=o+cfmoney
                  let createobj = {
                      ypid:obj1.medicinesId,
                      ypname:obj1.medicinesName,
                      ypunti:obj1.unit,
                      sum:ob.value,
                      price:obj1.inventoryPrescriptionPrice,
                      money:cfmoney
                  }
                  yplist.push(createobj)
              }
               zonglist.push(yplist)
      }

      this.ypprice=o
      let xmmoney = 0;
      let xm;
      for (let o3 of this.xiangmulist) {
        let xiangmulist1=[]
        for (let o4 of o3) {
          xmmoney = xmmoney + o4.unitPrice;
          let obj2 ={
             xmid:o4.insId,
             xmdanwei:o4.clas,
             xmmc:o4.inspectionName,
             price:o4.unitPrice
          }
          xiangmulist1.push(obj2)
        }
        zonglist2.push(xiangmulist1)
      }
      this.xmprice = xmmoney;
      this.drawer = true;

      //数据集合
      let yplist ={
           //患者信息
              disabled: this.user.disabled,
              patientId:this.user.patientId,
              registrationId:this.user.registrationId,
              name: this.user.name,
              php: this.user.php,
              address: this.user.address,
              sex: this.user.sex,
              phpaddress: this.user.phpaddress,
              doctorname: this.user.doctorname,
            //诊断信息
              zhushu: this.diag.zhushu,
              fabingdate: new Date(this.diag.fabingdate).toLocaleDateString(),
              leixin: this.diag.leixin,
              chuanran: this.diag.chuanran,
              reslt: this.diag.reslt,
              jianyi: this.diag.jianyi,
              beizhu: this.diag.beizhu,
              fjf:this.fjf,
              ghf:this.fujiafei
      }  
     this.str=JSON.stringify(yplist)
     this.list=JSON.stringify(zonglist)+'%'+JSON.stringify(zonglist2)
     
    },
    //确定添加处方
    addmedicines(e) {
      if (e == 1) {
        if (this.multipleSelection.length == 0) {
          open3(this, "未选择任何药品");
          return;
        }
        //药品添加
        this.chufanglist.push(this.multipleSelection);
        this.addchufang = false;
        this.$refs.table.clearSelection();
      } else {
        if (this.multipleSelection1.length == 0) {
          open3(this, "未选择任何项目");
          return;
        }
        //药品添加
        this.xiangmulist.push(this.multipleSelection1);
        this.addxiangmu = false;
        this.$refs.table2.clearSelection();
      }
    },
    //清空患者信息
    resltuserinfo() {
      this.user.disabled = false;
      this.user.name = "";
      this.user.patientId=''
      this.user.registrationId=''
      this.user.php = "";
      this.user.address = "";
      this.user.sex = "";
      this.user.doctorname = "";
    },
    //根据姓名或手机模糊查询
    selectbynameOrphp() {
      if (this.activeName == "nodoctor") {
        //未就诊查询
          selectbynameOrphp({ i: 1 ,"namephp":this.select01}).then((re) => {
            this.falseReg = re.data;
          });
      }else{
        //已就诊查询
          getAllRegisterToday2({namephp:this.select01}).then(re=>{
              this.trueReg = re.data;
          })
      }
    },

    //输入数量和库存比对
    inputcall(e, index) {
      let i = document.getElementById("a" + index + e.medicinesId);
      if (i.value > e.inventoryNum) {
        i.value = e.inventoryNum;
        open4(this, "库存不足");
      }
     
      
    },
    inputcall2(e,index){
       let i = document.getElementById("a" + index + e.medicinesId);
        if(i.value==''||i.value<1){
          i.value=1
        }
    },
    
    //库存为0时 禁止选
    checkSelect(row, index) {
      if (row.inventoryNum <= 0) {
        return false;
      }
      return true;
    },
    //键盘事件
    downinput(){
      this.selectbynameOrphp()
    },
    //提交插入数据库
    Submit() {
      let formdata=new FormData()
      formdata.append("str",this.str)
      formdata.append("list",this.list)
      formdata.append('money', this.ypprice + this.xmprice + this.fujiafei+this.fjf)
      billing(formdata).then(re=>{
          if(re.code==200){
                open2(this,"开单成功")
                this.drawer=false
          }else{
                open4(this,"开单失败")
          }
      })
    },
    //附加费
 

  },
  mounted() {
    //获取今天已就诊和未就诊列表
    getAllRegisterToday({ i: 1 }).then((re) => {
      this.falseReg = re.data;
    });
   getAllRegisterToday2({namephp:''}).then(re=>{
      this.trueReg = re.data;
   })
   //获取医生信息
   getNewdoctorinfo().then(re=>{
    this.newdoctorname=re.data
   })

    //获取药品列表
    getMedicinesList().then((re) => {
      this.medicinelist = re.data;
    });
    //获取检测项目列表
    getAllInspection().then((re) => {
      this.Inspection = re.data;
    });
    //获取收费列表
    getAllext().then(re=>{
      this.fujiafeilist = re.data
    })

    
    if (this.$route.query.user != undefined) {
      let row = JSON.parse(this.$route.query.user);
      this.user.disabled = true;
      this.user.registrationId=row.registrationId
      this.user.patientId=row.dzmPatient.patientId
      this.user.name = row.dzmPatient.name;
      this.user.php = row.dzmPatient.mobile;
      this.user.address = row.dzmPatient.address;
      row.dzmPatient.sex == 1 ? (this.user.sex = "男") : (this.user.sex = "女");
      this.user.doctorname = row.dzmHisDoctor.trueName;
    }
    setInterval(() => {
      this.today =
        new Date().toLocaleDateString() + "-" + new Date().toLocaleTimeString();
    }, 1000);
  },
  watch: {
    "user.disabled"() {
      if (this.user.disabled) {
        //不收费
        this.fujiafei = 0;
      } else {
        //收费
        this.fujiafei = 30;
      }
    },
    activeName() {
      if (this.activeName == "nodoctor") {
        loading(this, "table1", 0.7);
      } else {
        loading(this, "table2", 0.7);
      }
    },
  },
};
</script>

<style scoped>
*{
  font-weight: bold;
}
.mt{
  margin-top:20px
}
.el-tab-pane {
  height: 100%;
}
[v-cloak] {
  display: none;
}
.full {
  margin-top: -5px;
}
.bu_cl {
  position: absolute;
  top: 95px;
  left: 550px;
}
.h1_cl {
  margin-top: 15px;
  margin-left: 50px;
  color: red;
}
.el_col_cl1 {
  background-color: blanchedalmond;
  height: 50px;
}
.td_cl{
  padding-left: 30px;
}
.bu_cl_an{
  margin-left: 600px;
}
#seedoctor{
box-shadow:  0px 0px 25px #98d3e7;
}
</style>
